<template>
	<view class="container" :style="{ height: windowHeight + 'px' }">
		<view class="qrcode" :style="{ height: qrcodeBoxHeight + 'px' }"><image :style="{ width: imageSize.width + 'px', height: imageSize.height + 'px' }" @load="qrcodeLoaded" mode="aspectFit" :src="qrcode" @tap="previewImage"></image></view>
		<view class="qrcode-foot">
			<view class="qrcode-foot-btn" @tap="copyShareUrl" style="background: linear-gradient(to right, #fac905 0, #ff9500 100%);">复制邀请链接</view>
			<view class="qrcode-foot-btn" @tap="saveShareImage">保存海报</view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import Share from '@/utils/Share.js';
export default {
	data() {
		return {
			qrcode: '',
			windowHeight: null,
			qrcodeHeight: null,
			qrcodeBoxHeight: null,
			isLoad: false,
			code: '',
			imageSize: {
				width: null,
				height: null
			}
		};
	},
	onLoad() {},
	onShow() {
		if (this.isLoad) {
			this.$wechat.initJssdk(this.setShare());
		} else {
			// 获取推广二维码
			this.getPoster();
		}
	},
	methods: {
		/**
		 * 获取推广二维码尺寸
		 */
		qrcodeLoaded(e) {
			const detail = e.detail;
			const detailHeight = detail.height;
			const detailWidth = detail.width;
			const detailRatio = detailHeight / detailWidth; // 图片比例

			let systemInfo = wx.getSystemInfoSync();
			let footHeight = uni.upx2px(100); // tap高度
			this.windowHeight = systemInfo.windowHeight;
			this.qrcodeBoxHeight = systemInfo.windowHeight - footHeight; //二维码容器的高度

			let qrcodeBoxWidth = systemInfo.windowWidth - uni.upx2px(100);

			let imageHeigth = detailRatio * qrcodeBoxWidth;
			if (imageHeigth < this.qrcodeBoxHeight - uni.upx2px(100)) {
				this.$set(this.imageSize, 'height', imageHeigth);
				this.$set(this.imageSize, 'width', qrcodeBoxWidth);
			} else {
				let imageHeigth = this.qrcodeBoxHeight - uni.upx2px(100);
				let imageWidth = imageHeigth / detailRatio;
				this.$set(this.imageSize, 'width', imageWidth);
				this.$set(this.imageSize, 'height', imageHeigth);
			}
		},
		setShare() {
			// #ifdef H5
			this.$wechat.updateAppMessageShareData({
				title: '元尊商城', // 分享标题
				desc: '加入我', // 分享描述
				link: Tools.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: this.qrcode // 分享图标
			});
			this.$wechat.onMenuShareTimeline({
				title: '元尊商城', // 分享标题
				link: Tools.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: this.qrcode // 分享图标
			});
			// #endif
		},
		/**
		 * 获取推广二维码
		 */
		getPoster() {
			uni.showLoading({
				title: '加载中'
			});

			this.$get(
				this.$api.getUserDealerQrcodePoster,
				{},
				res => {
					// 设置当前页面标题
					this.qrcode = res.data.qrcode;
					this.isLoad = true;
					this.$wechat.initJssdk(this.setShare());
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		},

		previewImage() {
			uni.previewImage({
				current: this.qrcode,
				urls: [this.qrcode]
			});
		},
		copyShareUrl() {
			Share.send(Tools.getShareUrl());
		},
		saveShareImage() {
			// #ifdef H5
			Tools.showError('平台不支持下载推广海报，请长按图片下载');
			// #endif
			// #ifndef H5
			uni.downloadFile({
				url: this.qrcode, //仅为示例，并非真实的资源
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '推广海报下载成功'
								});
							}
						});
					}
				}
			});

			// #endif
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.container {
	position: relative;
}
.qrcode {
	padding: 50rpx;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}
.qrcode image {
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
	border-radius: 12rpx;
}
.qrcode-foot {
	position: fixed;
	height: 100rpx;
	width: 750rpx;
	display: flex;
	bottom: 0;
	justify-content: space-between;
	padding: 0 50rpx;
	box-sizing: border-box;
}
.qrcode-foot-btn {
	width: 300rpx;
	height: 70rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
	border-radius: 12rpx;
	font-size: 26rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
	color: #fff;
}
</style>
